<template>
  <div>
    <h1>组件通信</h1>
    父传子
    <!-- 
    父组件，以属性的形式把参数传递给子组件
    子组件，使用props接收，和使用data是一样的
    -->
    <hr>
    <CarCom num="5" total="100"></CarCom>
    <CarCom num="3" total="70"></CarCom>
    活数据
    <CarCom :num="num" :total="total"></CarCom>
    <button @click="num+=2">num+2</button>
    <button @click="total+=20">total+20</button>
    <h1>子传父组件</h1>
    <!-- 
      1，父组件中监听子组件抛出的事件
      2，子组件通过$emmit抛出事件
    -->
    <CarCom @onPay="onPay"></CarCom>
  </div>
</template>

<script>
import CarCom from './components/CarCom.vue';
  export default {
    components:{
      CarCom
    },
    data(){
      return {
        num:7,
        total:300
      }
    },
    methods:{
      onPay(payType){
        console.log("父组件收到子组件的支付提醒",payType);
      }
    }
  }
</script>

<style lang="scss" scoped>

</style>